<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟交流学院</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
    <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="index.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a:visited{
            color: black;
        }
        a{
            color: black;
            text-decoration: none;
        }
        header{
            height: 60px;
            background: #d1ece2;
        }
        .container .banner{
            width: 300px;
            height: 60px;
            float: left;
            background: beige;
        }
        .banner .welcome{
            font-family: "Berlin Sans FB Demi",serif;
            float: right;
        }
        li{
            list-style: none;
        }
        .direct{
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            /*flex-basis: 150px;*/
            justify-content: space-around;
            margin: 0;
        }
        .direct li ul{
            display: none;
        }
        .direct>li{
            box-sizing: border-box;
            height: 30px;
            /*width:150px;*/
            display: inline-block;
            /*border: 1px solid white;*/
        }
        .direct li>a{
            display: inline-block;
        }
        .direct >li{
            position: relative;
        }
        
        .direct li:hover ul{
            display: block;
            position: absolute;
            /*flex-direction: column;*/
            text-align: left;
            width: 200px;
            padding: 5px 0;
            z-index: 10;
            background: beige;
            left: -10px;
            /*background: blue;*/
        }
        .direct li:hover ul li{
            text-align: left;
        }
        .index{
            margin: 0 auto;
            /*background: chartreuse;*/
        }
        .first-direct{
            border-bottom: 1px solid white;
        }

    </style>
</head>
<body>
<header class="container">
    <div class="banner">
        <a class="welcome" href="">欢迎来到虚拟交流学院</a>
    </div>
    <div class="index">
        <ul class="direct first-direct">
            <li><a>活动</a>
                <ul>
                    <li><a href="">商业活动</a></li>
                    <li><a href="">学生自发活动</a></li>
                </ul>
            </li>
            <li><a>交朋友</a>
                <ul>
                    <li><a href="">交朋友</a></li>
                    <li><a href="">一起自习</a></li>
                </ul>
            </li>
            <li><a>一起拼</a>
                <ul>
                    <li><a href="">一起网络品购</a></li>
                    <li><a href="">一起玩乐</a></li>
                    <li><a href="">一起吃喝</a></li>
                </ul>
            </li>
            <li><a>探讨人生</a></li>
            <li>
                <a>
                    竞赛组队
                </a>
                <ul>
                    <li><a href="">一起完成</a></li>
                    <li><a href="">一起学习</a></li>
                </ul>
            </li>
            <li><a>二手交易</a>
                <ul>
                    <li><a href="">交易区</a></li>
                    <li><a href="">赠送区</a></li>
                </ul>
            </li>
<!--            li>a+ul>(li>a) -->
            <li><a>基本</a>
                <ul>
                    <li><a href="">基本价</a></li>
                </ul>
            </li>
            <li><a href="">吃喝玩乐推荐</a></li>
            <li><a href="">微盈利</a></li>
            <li><a>商业区</a>
                <ul>
                    <li><a href="">标准品质</a></li>
                    <li><a href="">普通品质</a></li>
                </ul>
            </li>

        </ul>
        <ul class="direct">
            <li><a>广告区</a>
                <ul>
                    <li><a href="">商业广告区</a></li>
                    <li><a href="">个人广告区</a></li>
                </ul>
            </li>
            <li><a href="">动态区</a>
                <ul>
                    <li><a href="">无聊动态区</a></li>
                    <li><a href="">分享动态区</a></li>
                    <li><a href="">心情动态区</a></li>
                </ul>
            </li>
            <li><a href="">学习</a>
                <ul>
                    <li><a href="">官方软件安装教程</a></li>
                    <li><a href="">官方编程入门教程</a></li>
                    <li><a href="">官方专业问题分析与介绍</a></li>
                </ul>
            </li>
            <li><a href="">学院学生自编程序</a></li>
            <li><a href="">资讯</a>
                <ul>
                    <li><a href="">爆料资讯</a></li>
                    <li><a href="">学校官方资讯</a></li>
                    <li><a href="">国内资讯</a></li>
                </ul>
            </li>
            <li><a href="">想要得到帮助</a>
                <ul>
                    <li><a href="">视频平台推流</a></li>
                    <li><a href="">网站推流</a></li>
                    <li><a href="">我能提供</a></li>
                </ul>
            </li>
            <li><a href="">官方微媒体</a></li>
            <li><a href="">寻找艺术家</a></li>
            <li><a href="">官方电话</a></li>
        </ul>

    </div>
</header>
<div class="main">
    <div class="userInfo">
        <div class="userInfoBox">
            <div class="userIcon">
                <img class="user-icon-img" src="" alt="">
            </div>
            <div class="userDetails">
                <div class="detail">用户名</div>
                <div class="detail">昵称</div>
                <div class="detail">主要身份</div>
                <div class="detail">详细信息</div>
            </div>
        </div>
        <div class="userControl">
            <div class="tools">
                <div class="administration">
                    <a href="">内容管理</a>
                </div>
                <div class="change">
                    <a href="">更换登录账号</a>
                </div>
                <div class="logout">
                    <a href="">注销登录</a>
                </div>
            </div>
        </div>
        <div class="loginBase">
            <div>登录状态: 未登录</div>
            <div class="loginInfo">选择登录以获得更好的使用体验</div>
            <div class="loginPanel">
                <a href="">注册</a>
                <a href="">登录</a>
            </div>
        </div>
    </div>
    <div class="comprehensive-information">
        hello world
        ${tip}
        <!--            div>div{hello}*200-->
    </div>

</div>
</body>
</html>





















